<template>
  <div class="container">
    <div class="header">
      <el-row>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">仓库编号</div>
          <el-input v-model="page.code" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">仓库名称</div>
          <el-input v-model="page.name" placeholder="请输入"></el-input>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label">仓库状态</div>
          <el-select v-model="status" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in wareStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="6" style="padding-left: 15px; padding-right: 15px">
          <div class="label"></div>
          <div class="labelbutton">
            <button class="penpel searchbutton" @click="searchPag">搜索</button>
            <button class="penpel resetbutton" @click="resetPag">重置</button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <button class="addbutton penpel" @click="$router.push('/manageinfo/details')">新增仓库</button>
      <div class="content_table">
        <WareTable v-if="tableData.length > 0" :tableData='tableData' v-loading="loading" @StatusShow="StatusShow"/>
        <EmptyTip v-else />
      </div>
      <MyPagination v-if="tableData.length > 0" :page="page" :total="Number(total)" @updateSize="updateSize" @updateuCrrent="updateuCrrent"/>
    </div>
    <StatusDialog ref="StatusDialog" :dialogVisible.sync="dialogVisible" @updataWare="getWarehouseList"/>
  </div>
</template>

<script>
import StatusDialog from './components/StatusDialog.vue'
import WareTable from './components/WareTable.vue'
import EmunList from '@/constant/warehouse'
import { getWarehouseList } from '@/api/warehouse'
export default {
  name: 'WareHouse',
  components: {
    WareTable,
    StatusDialog
  },
  data () {
    return {
      page: {
        name: '',
        code: '',
        current: '1',
        size: 10
      },
      status: '',
      total: '',
      tableData: [],
      loading: false,
      wareStatus: EmunList.wareStatus,
      dialogVisible: false
    }
  },
  created () {
    this.getWarehouseList()
  },
  methods: {
    // 获取数据
    async getWarehouseList () {
      this.loading = true
      const res = await getWarehouseList(this.page)
      this.tableData = res.records
      this.total = res.total
      this.loading = false
    },
    // 重置
    resetPag () {
      this.page = {
        name: '',
        code: '',
        status: null,
        current: '1',
        size: 10,
        total: ''
      }
    },
    // 搜索
    async searchPag () {
      this.loading = true
      const res = await getWarehouseList({ ...this.page, status: this.status })
      this.tableData = res.records
      this.total = res.total
      this.loading = false
    },
    // 启用
    StatusShow (row) {
      this.dialogVisible = true
      this.$refs.StatusDialog.row = row
    },
    /* 分页 */
    updateuCrrent (val) {
      this.page.current = val
      this.getWarehouseList()
    },
    updateSize (val) {
      this.page.size = val
      this.getWarehouseList()
    }
  }
}
</script>

<style lang="scss" scoped>
 @import '~@/styles/mixin.scss';
  .penpel {
    @include penpel
  }
  .header {
    @include header;
    .label {
     @include label;
    }
    .labelbutton {
      text-align: right;
      .searchbutton {
        @include searchbutton;
      }
      .resetbutton {
        @include resetbutton;
      }
    }
  }
  .content {
    @include content;
    .addbutton {
      @include addbutton;
    }
  }
</style>
